<template>
  <div class="dashboard-container">
    <!-- 第一行 数据概览加上我的信息 -->
    <div class="dashboard-row-one">
      <el-row :gutter="10">
        <!-- 数据概览 -->
        <el-col :span="14">
          <div class="dashboard-card">
            <div class="dashboard-card-header">
              <h3>数据概览</h3>
              <span>数据更新: {{ updateTime }}</span>
            </div>
            <div class="dashboard-card-content">
              <el-row :gutter="10" class="overview-row">
                <el-col :span="4" class="overview-item">
                  <PieChart
                    :title="rings[0].title"
                    :unit="rings[0].unit"
                    :total="rings[0].total"
                    :data="rings[0].data"
                    :size="160" />
                </el-col>
                <el-col :span="4" class="overview-item">
                  <PieChart
                    :title="rings[1].title"
                    :unit="rings[1].unit"
                    :total="rings[1].total"
                    :data="rings[1].data"
                    :size="160" />
                </el-col>
                <el-col :span="4" class="overview-item">
                  <PieChart
                    :title="rings[2].title"
                    :unit="rings[2].unit"
                    :total="rings[2].total"
                    :data="rings[2].data"
                    :size="160" />
                </el-col>
                <el-col :span="4" class="overview-item">
                  <PieChart
                    :title="rings[3].title"
                    :unit="rings[3].unit"
                    :total="rings[3].total"
                    :data="rings[3].data"
                    :size="160" />
                </el-col>
                <el-col :span="4" class="overview-item">
                  <PieChart
                    :title="rings[4].title"
                    :unit="rings[4].unit"
                    :total="rings[4].total"
                    :data="rings[4].data"
                    :size="160" />
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>

        <!-- 我的信息 -->
        <el-col :span="10">
          <div class="dashboard-card">
            <div class="dashboard-card-header">
              <h3>我的信息</h3>
            </div>
            <div class="dashboard-card-content">
              <!-- 第一部分 头像加用户信息 -->
              <div class="user-info-row">
                <div class="avatar">
                  <img :src="userAvatar" alt="用户头像" class="avatar-image" />
                </div>
                <!-- 用户信息 -->
                <div class="user-info">
                  <p class="user-name">
                    您好，{{
                      userNickname != "" ? userName : "XXX"
                    }}，今天也是元气满满的一天！
                  </p>
                  <p class="user-role">
                    <span>{{ userName }}</span>
                    <span>{{ userRole }}</span>
                  </p>
                  <p>
                    <span>副董事长</span>
                    <span>{{ deptName }}</span>
                  </p>
                </div>
              </div>
              <!-- 第二部分下属员工 -->
              <div class="subordinate-row">
                <div class="title">下属员工</div>
                <div class="logo">
                  <img
                    v-for="item in logoArr.slice(0, 6)"
                    :key="item.id"
                    :src="item.imgUrl"
                    alt="用户头像" />
                  <div v-if="logoArr.length > 6" class="counts">
                    +{{ logoArr.length - 6 }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 第二行数据统计加上快捷方式 -->
    <div class="dashboard-row-two">
      <el-row :gutter="10">
        <!-- 数据统计 三个图表 -->
        <el-col :span="14">
          <div class="dashboard-card">
            <div class="dashboard-card-header">
              <h3>数据统计</h3>
            </div>
            <div class="dashboard-card-content">
              <el-tabs v-model="activeTab">
                <el-tab-pane label="收益情况" name="revenue">
                  <RevenueChart />
                </el-tab-pane>
                <el-tab-pane label="入退情况" name="entryExit">
                  <EntryExitChart />
                </el-tab-pane>
                <el-tab-pane label="服务情况" name="service">
                  <ServiceChart />
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </el-col>

        <!-- 快捷方式 -->
        <el-col :span="10">
          <div class="dashboard-card">
            <div class="dashboard-card-header">
              <h3>快捷方式</h3>
            </div>
            <div class="dashboard-card-content">
              <div class="shortcut">
                <!-- 第一行 -->
                <div class="shortcut-row">
                  <!--跳转到待办事项组件 -->
                  <router-link to="CollaborationWork/tasking">
                    <div class="item todo-count">
                      <div class="icon">
                        <el-icon><SwitchFilled /></el-icon>
                      </div>
                      <span class="todo-count-text" v-if="todoCount > 0">{{
                        todoCount
                      }}</span>
                    </div>
                    <div class="text">待办事项</div>
                  </router-link>
                  <!--跳转到入账列表 -->
                  <router-link to="finance/bill/billList">
                    <div class="item">
                      <div class="icon">
                        <el-icon><SwitchFilled /></el-icon>
                      </div>
                    </div>
                    <div class="text">入账列表</div>
                  </router-link>
                  <!--跳转到订单管理 -->
                  <router-link to="order/orders">
                    <div class="item">
                      <div class="icon">
                        <el-icon><SwitchFilled /></el-icon>
                      </div>
                    </div>
                    <div class="text">订单管理</div>
                  </router-link>
                  <!--跳转到退款管理 -->
                  <router-link to="checkout/checkout">
                    <div class="item">
                      <div class="icon">
                        <el-icon><SwitchFilled /></el-icon>
                      </div>
                    </div>
                    <div class="text">退款管理</div>
                  </router-link>
                </div>

                <!-- 第二行 -->
                <div class="shortcut-row">
                  <!-- 跳转到入驻申请组件 -->
                  <router-link to="CollaborationWork/MyApply/CheckInApply">
                    <div class="item">
                      <div class="icon">
                        <el-icon>
                          <Plus />
                        </el-icon>
                      </div>
                    </div>
                    <div class="text">新增用户</div>
                  </router-link>
                  <!--跳转到退住申请 -->
                  <router-link to="CollaborationWork/MyApply/CheckOutApply">
                    <div class="item">
                      <div class="icon">
                        <el-icon>
                          <Plus />
                        </el-icon>
                      </div>
                    </div>
                    <div class="text">退住申请</div>
                  </router-link>
                  <!--跳转到请假申请 -->
                  <router-link to="CollaborationWork/MyApply/RequestApply">
                    <div class="item">
                      <div class="icon">
                        <el-icon>
                          <Plus />
                        </el-icon>
                      </div>
                    </div>
                    <div class="text">请假申请</div>
                  </router-link>
                  <!--跳转到预约登记 -->
                  <router-link to="appointments/appointment">
                    <div class="item">
                      <div class="icon">
                        <el-icon>
                          <Plus />
                        </el-icon>
                      </div>
                    </div>
                    <div class="text">预约登记</div>
                  </router-link>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 第三行 待办事项加上预约总览 -->
    <div class="dashboard-row-three">
      <el-row :gutter="10">
        <!-- 代办事项 -->
        <el-col :span="14">
          <div class="dashboard-card">
            <div class="dashboard-card-header">
              <h3>待办事项</h3>
            </div>
            <div class="dashboard-card-content">
              <!-- 遍历选项 -->
              <!-- 待办列表 超出高度时出现滚动条 -->
              <div
                class="todo-list"
                style="max-height: 240px; overflow-y: auto">
                <div v-for="item in todoItems" :key="item.id" class="todo-item">
                  <div class="todo-item-content">
                    <!-- 第一行 -->
                    <div class="row-one row">
                      <div class="todo-item-title">{{ item.title }}</div>
                      <div>{{ item.no }}</div>
                      <div>{{ item.elderName }}的{{ item.title }}申请</div>
                    </div>
                    <!-- 第二行 -->
                    <div class="row-two row">
                      <div>申请人:{{ item.createUserName }}</div>
                      <div>申请时间:{{ item.createTime }}</div>
                    </div>
                  </div>
                  <router-link to="CollaborationWork/tasking">
                    <div class="todo-item-btn">审批</div>
                  </router-link>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <!-- 预约总览 -->
        <el-col :span="10">
          <div class="dashboard-card">
            <div class="dashboard-card-header">
              <h3>预约总览</h3>
            </div>
            <div class="dashboard-card-content">
              <Calendar :appointmentData="appointmentDataRef" />
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 第四行 老人等级分布  老人年龄分布  养老服务能力 -->
    <div class="dashboard-row-four">
      <el-row :gutter="10">
        <!-- 老人等级分布 -->
        <el-col :span="8">
          <div class="dashboard-card">
            <div class="dashboard-card-header">
              <h3>老人等级分布</h3>
              <span>数据更新: {{ updateTime }}</span>
            </div>
            <div class="dashboard-card-content">
              <ElderLevel :data="elderLevelDataRef" />
            </div>
          </div>
        </el-col>
        <!-- 老人年龄分布 -->
        <el-col :span="8">
          <div class="dashboard-card">
            <div class="dashboard-card-header">
              <h3>老人年龄分布</h3>
              <span>数据更新: {{ updateTime }}</span>
            </div>
            <div class="dashboard-card-content">
              <ElderAge :data="elderAgeDataRef" />
            </div>
          </div>
        </el-col>
        <!-- 养老服务能力 -->
        <el-col :span="8">
          <div class="dashboard-card">
            <div class="dashboard-card-header">
              <h3>养老服务能力</h3>
              <span>数据更新: {{ updateTime }}</span>
            </div>
            <div class="dashboard-card-content">
              <ServeAbility
                :data="serveAbilityDimensionsRef.map((item) => item.value)"
                :size="280" />
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import PieChart from "./components/PieChart.vue";
import EntryExitChart from "./components/EntryExitChart.vue";
import RevenueChart from "./components/RevenueChart.vue";
import ElderAge from "./components/ElderAge.vue";
import ElderLevel from "./components/ElderLevel.vue";
import ServeAbility from "./components/ServeAbility.vue";
import Calendar from "./components/Calendar.vue";
//引入图表组件数据
import {
  dashboardRings,
  elderLevelData,
  elderAgeData,
  serveAbilityDimensions,
  todoItems,
  logoArr,
  appointmentData,
} from "./constant.js";
import ServiceChart from "./components/ServiceChart.vue";
//引入api数据
import {
  getTopPieData,
  getTopUserData,
  getElderLevelData,
  getTodoData,
  getElderAgeData,
  getElderServiceData,
} from "@/api/dashboard/dashboard.js";

// 将静态数据转换为响应式数据
const rings = ref(dashboardRings);
const elderLevelDataRef = ref(elderLevelData);
const elderAgeDataRef = ref(elderAgeData);
const serveAbilityDimensionsRef = ref(serveAbilityDimensions);
const appointmentDataRef = ref(appointmentData);

// 数据统计标签页激活项
const activeTab = ref("revenue");
//更新时间
const updateTime = ref("2023-01-01");
// 用户信息相关的计算属性
const userNickname = ref("咕噜");
const userName = ref("咕噜");
const userRole = ref("养老院副院长");
const deptName = ref("办公室");
const userAvatar = ref("https://avatars.githubusercontent.com/u/1011681?v=4");
//代办数量
const todoCount = computed(() => todoItems.value.length);

//页面加载时获取数据
onMounted(async () => {
  try {
    // 获取头部饼图数据并更新
    const topPieResponse = await getTopPieData();
    console.log("头部饼图数据:", topPieResponse);
    if (topPieResponse && topPieResponse.code === 200 && topPieResponse.data) {
      rings.value = topPieResponse.data;
    }

    //获取用户数据
    const topUserDataResponse = await getTopUserData();
    console.log("用户数据:", topUserDataResponse);
    if (
      topUserDataResponse &&
      topUserDataResponse.code === 200 &&
      topUserDataResponse.data
    ) {
      userNickname.value = topUserDataResponse.data.nickName;
      userName.value = topUserDataResponse.data.username;
      userRole.value = topUserDataResponse.data.roles;
      deptName.value = topUserDataResponse.data.deptName;
      //头像不为null时，赋值
      if (topUserDataResponse.data.avatar) {
        userAvatar.value = topUserDataResponse.data.avatar;
      }
    }

    //代办事项
    const todoDataResponse = await getTodoData();
    console.log("待办事项数据:", todoDataResponse);
    if (
      todoDataResponse &&
      todoDataResponse.code === 200 &&
      todoDataResponse.data
    ) {
      //清空已有的todoItems静态数据
      todoItems.value = [];
      //遍历data中的数据，赋值给todoItems
      for (let item of todoDataResponse.data) {
        todoItems.value.push({
          //type 1退住  2请假  3入住
          title: item.type == 1 ? "退住" : item.type == 2 ? "请假" : "入住",
          no: item.code,
          elderName: item.elderName,
          createUserName: item.applicant,
          createTime: item.createdAt,
        });
      }
    }

    //底部老人年龄等级分布
    const elderLevelResponse = await getElderLevelData();
    console.log("老人年龄等级分布数据:", elderLevelResponse);
    if (
      elderLevelResponse &&
      elderLevelResponse.code === 200 &&
      elderLevelResponse.data
    ) {
      elderLevelDataRef.value = elderLevelResponse.data;
    }

    //底部老人年龄数据赋值
    const elderAgeResponse = await getElderAgeData();
    console.log("老人年龄数据:", elderAgeResponse);
    if (
      elderAgeResponse &&
      elderAgeResponse.code === 200 &&
      elderAgeResponse.data
    ) {
      elderAgeDataRef.value = elderAgeResponse.data;
    }

    //顶部养老服务能力
    const elderServiceResponse = await getElderServiceData();
    console.log("养老服务能力数据:", elderServiceResponse);
    if (
      elderServiceResponse &&
      elderServiceResponse.code === 200 &&
      elderServiceResponse.data
    ) {
      serveAbilityDimensionsRef.value = elderServiceResponse.data;
    }

    console.log("服务能力数据:", await getElderServiceData());
  } catch (error) {
    console.error("获取数据失败:", error);
  }
});
</script>

<style scoped lang="scss">
/**最外层整体样式设置 */
.dashboard-container {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background-color: #f5f5f5;
}

/** 每个小模块的边框样式设置*/
.dashboard-card {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 0 16px;

  /**阴影设置 */
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  &:hover {
    transform: scale(1.01);
  }
  /**内部标题设置 */
  .dashboard-card-header {
    font-size: 18px;
    font-weight: bold;
    height: 30px;
    margin-top: 0;
    margin-bottom: 5px;
  }
}

/**第一行样式 */
.dashboard-row-one {
  /** 固定两个卡片高度，保证两列等高 */
  .dashboard-card {
    height: 260px;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .dashboard-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /**span标签样式 */
    span {
      font-size: 12px;
      color: #999;
      font-weight: 400;
    }
  }
  .dashboard-card-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /**头像用户信息部分样式 */
    .user-info-row {
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 16px;
      height: 60%;
      .user-info {
        margin-top: 10px;
      }
      .user-info p {
        display: flex;
        justify-content: space-between;
        gap: 4px;
        span {
          font-size: 14px;
          color: #999;
        }
      }
      .avatar {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
      }
      .avatar-image {
        width: 90px;
      }
    }
    /**下属员工部分样式 */
    .subordinate-row {
      flex: 1;
      display: flex;
      flex-direction: column;
      font-size: 14px;
      color: #999;
      /** 头像部分*/
      .logo {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 10px;
        gap: 10px;
        img {
          height: 50px;
        }
        .counts {
          height: 50px;
          width: 50px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #d4e3fc;
        }
      }
    }
  }
}

/**第二行样式 */
.dashboard-row-two {
  /** 固定两个卡片高度，保证两列等高 */
  .dashboard-card {
    height: 340px;
    width: 100%;
    display: flex;
    flex-direction: column;
    .shortcut {
      margin-top: 40px;
      height: 220px;
      /**内部标签项样式 */
      .shortcut-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        font-size: 14px;
        color: #999;
        .item {
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #d4e3fc;
          margin-bottom: 10px;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          .icon {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
          }
        }

        .todo-count {
          position: relative;
          /**内部标签悬浮在右上角 */
          .todo-count-text {
            position: absolute;
            top: -5px;
            right: -5px;
            font-size: 12px;
            color: #fff;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 24px;
            width: 24px;
            border-radius: 50%;
            background-color: blue;
          }
        }
      }
    }
  }
}

/** 第三行样式 */
.dashboard-row-three {
  /** 固定两个卡片高度，保证两列等高 */
  .dashboard-card {
    height: 300px;
    width: 100%;
    display: flex;
    flex-direction: column;

    .todo-list {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      flex-wrap: wrap;
      background-color: #f5f5f5;
      gap: 10px;
      .todo-item {
        width: 47%;
        display: flex;
        margin-right: 10px;
        justify-content: space-between;
        gap: 10px;
        align-items: center;
        border: 1px solid #999;
        padding: 10px;
        border-radius: 5px;

        .todo-item-content {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 10px;
          .row {
            flex: 1;
            display: flex;
            gap: 10px;
            justify-content: space-between;
            align-items: center;

            .todo-item-title {
              width: 40px;
              height: 30px;
              font-size: 15px;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 4px;
              background-color: #bbd3fb;
            }
          }

          .row-two {
            font-size: 14px;
            color: #999;
          }
        }

        .todo-item-btn {
          align-self: center;
          background-color: #0052d9;
          width: 50px;
          height: 40px;
          color: #fff;
          font-size: 16px;
          border-radius: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}

/** 第四行样式*/
.dashboard-row-four {
  /** 固定两个卡片高度，保证两列等高 */
  .dashboard-card {
    height: 300px;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .dashboard-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /**span标签样式 */
    span {
      font-size: 12px;
      color: #999;
      font-weight: 400;
    }
  }
}

/** 数据概览中的环形图排版 */
.overview-row {
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.overview-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
}
</style>
